<template>
	<div class="form">

		<div class="left">
			<div class="action-bar">{{ props.type }}</div>
			<Draggable class="draggable" @end="draggableChange" :list="dataLeft"
				:group="{ name: 'people', pull: '', put: false }" itemKey="barType">
				<template #item="{ element, index }">
					<p class="dataLeft-item">{{ element.barName }}</p>
				</template>
			</Draggable>
		</div>
		<el-divider direction="vertical" />
		<div class="center">
			<div class="action-bar">
				<el-button type="primary" :icon="RefreshRight" :size="'large'">运行</el-button>
				<el-button type="primary" :icon="DocumentCopy" :size="'large'">保存</el-button>
				<el-button type="primary" :icon="Delete" :size="'large'">清空</el-button>

			</div>
			<Draggable class="draggable" :list="datacenter" :group="'people'" itemKey="index">
				<template #item="{ element, index }">
					<p class="datacenter-item" @click="draggableClick(element)">{{ element.barName }}</p>
				</template>

			</Draggable>
		</div>
		<el-divider direction="vertical" />
		<div class="right">
			<RightForm v-model="draggableItem"></RightForm>
		</div>
	</div>
</template>
<script setup lang="ts">
import Draggable from 'vuedraggable';
import { onBeforeMount, onMounted, reactive } from 'vue';
import { DataList, dataList } from "../../utils/constant";
import RightForm from '../right-form/index.vue'
import { Delete, DocumentCopy, RefreshRight } from '@element-plus/icons-vue';
import { v4 as uuidv4 } from "uuid";

const props = defineProps<{
	type: 'add' | 'edit';
}>();

let draggableItem = reactive<DataList>({
	barName: '',
	barType: '',
	ispicker: true,
	activeData: null,
});
const dataLeft = reactive(dataList);
let datacenter: DataList[] = reactive([]);

/**
 * 拖动结束 clone数据并添加uuid
 * @param evt
 * @returns
 * @date 2023-02-09 14:34:27
 */
const draggableChange = (evt: any) => {
	const item = evt.item.__draggable_context.element;
	item.uuid = uuidv4();
	draggableItem=item;
	datacenter.push(item);
	console.log(evt.item.__draggable_context.element, "拖动结束");

}
const draggableClick = (item: DataList) => {

	draggableItem=item;
	console.log(item);
}

onBeforeMount(() => {

})
onMounted(() => {

})
</script>
<style lang="scss" scoped>
.form {
	width: 100%;
	min-height: calc(100vh - 84px);
	display: flex;

	.left,
	.center,
	.right {
		box-sizing: border-box;
		min-height: calc(100vh - 84px);
		position: relative;
		padding: 10px 20px;
	}

	.left {
		width: 20%;

		.dataLeft-item {
			padding: 20px 0;
			background: #f6f7ff;
			border-radius: 6px;
			text-align: center;

			&:hover {
				background-color: #79bbff;
				cursor: pointer;
			}
		}
	}

	.center {
		width: 35%;
		box-shadow: 1px 0 4px rgba(0, 21, 41, 0.35), -1px 0 4px rgba(0, 21, 41, 0.35);

		.datacenter-item {
			padding: 10px 0;
			background: #f6f7ff;
			border-radius: 6px;
			text-align: center;

			&:hover {
				background-color: #79bbff;
				cursor: pointer;
			}

		}
	}

	.right {
		width: 45%;

	}

	.draggable {
		height: calc(100vh - 154px);
	}
}

.action-bar {
	display: flex;
	justify-content: right;
	height: 70px;
}

.el-divider--vertical {
	height: auto;
	margin: 0;
}
</style>
